<template>
  <view class="container">
    <view class="space-upper">
      <view class="wallet-image">
        <image src="/static/wallet.png" mode="widthFix"></image>
      </view>
      <view class="wallet-account">
        <view class="wallet-account_balance">
          <text>{{ userInfo.balance || '00.00' }}</text>
        </view>
        <view class="wallet-account_lable">
          <text>账户余额(元)</text>
        </view>
      </view>
    </view>
    <view class="space-lower">
      <view class="space-lower_item btn-recharge">
        <view class="btn-submit">充 值</view>
      </view>
      <view class="space-lower_item item-lable dis-flex flex-x-around">
        <view class="lable-text" @click="JumpRechargeRecord">
          <text>充值记录</text>
        </view>
        <view class="lable-text" @click="SkipBillingDetails">
          <text>账单详情</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { info } from '@/api/user.js'
export default {
  onLoad (options) {
    this.getUserInfo()
  },
  daa () {
    return {
      // 用户信息
      userInfo: {}
    }
  },
  methods: {
    // 获取当前用户信息
    async getUserInfo () {
      const res = await info()
      console.log(res)
      this.userInfo = res.data.userInfo
      console.log(this.userInfo.balance)
    },
    // 跳转充值记录页面
    JumpRechargeRecord () {
      this.$navTo('pages/wallet/recharge/order')
    },

    // 跳转账单详情页面
    SkipBillingDetails () {
      this.$navTo('pages/wallet/balance/log')
    }
  }
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.container {
  background: #fff;
}

.space-upper {
  padding: 150rpx 0;
  text-align: center;
}

.wallet-image image {
  width: 360rpx;
  height: 261.72rpx;
}

.wallet-account {
  margin-top: 20rpx;
}

.wallet-account_balance {
  font-size: 56rpx;
}

.wallet-account_lable {
  margin-top: 14rpx;
  color: #cec1c1;
  font-size: 26rpx;
}

.space-lower {
  margin-top: 30rpx;
  padding: 0 110rpx;
}

.btn-recharge .btn-submit {
  width: 460rpx;
  height: 84rpx;
  margin: 0 auto;
  border-radius: 50rpx;
  background: #786cff;
  color: white;
  font-size: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-lable {
  margin-top: 80rpx;
  font-size: 28rpx;
  color: rgb(94, 94, 94);
  padding: 0 100rpx;
}
</style>
